<template>
	<view class="main-content">
		<view class="page-top">
			<view class="page-top-item">
				<text>{{masterCount.totalOrderCount || 0}}</text>
				<text>订单总数量</text>
			</view>
			<view class="page-top-item">
				<text>{{masterCount.completedOrderCount || 0}}</text>
				<text>已完成订单数量</text>
			</view>
			<view class="page-top-item">
				<text>{{masterCount.completedOrderAmount || 0}}</text>
				<text>已完成金额</text>
			</view>
			<view class="page-top-item">
				<text>{{masterCount.ongoingOrderCount || 0}}</text>
				<text>进行中订单数量</text>
			</view>
		</view>
		<you-tabs :tabsList="tabList" :activeName="activeName" tabActiveColor="#325EF5" bottomLineColor="#325EF5"
			@tabClick="clickTabItem">
		</you-tabs>
		<scroll-view scroll-y :style="{height: scrollHeight}" class="list-box" @scrolltolower="loadMore">
			<view v-for="(item,index) in itemLists" :key="index" class="list-item">
				<view>
					<text>{{item.createTime}}</text>
					<text class="status" :style="{color:item.status===5?'#049c37':item.status===4?'#FF8A00':'#325ef5'}">
						{{getStatusLabel(item.status)}}
					</text>
				</view>
				<view class="title">{{item.device}} 
				<span v-if="item.status===4" style="color:#c8c8c8;font-size: 24rpx;">总计：<span style="color: #325ef5;font-weight: 600;font-size: 36rpx;">{{item.payMoney}}</span> 元</span></view>
				<text class="describe">{{item.address}}</text>
				<view>
					<text>预约上门时间：</text>
					<text>{{item.subscribeDate}}</text>
				</view>
				<text class="title">{{item.applyerName}}</text>
				<text class="describe">{{item.remark}}</text>
				<scroll-view scroll-x class="imgs" style="width: 100%;">
					<view 
						v-if="item.photo && item.photo != ''" 
						:style="{width: 112 * item.photo.split(',').length + 'rpx'}">
						<image v-for="(items,indexs) in item.photo.split(',')" :key="indexs" :src="baseUrl+items" mode="widthFix"></image>
					</view>
				</scroll-view>
				
				<view class="submit">
					<button class="cancel" style="opacity: .5;" disabled v-if="item.status===4">已提交结算单</button>
					<button class="confirm" v-if="item.status===3" @click.stop="affirmOrder(item, 4)">提交结算单</button>
					<button class="cancel" v-if="item.status===2" @click.stop="updateTime(item)">修改上门时间</button>
					<button class="confirm" v-if="item.status===2" @click.stop="affirmOrder(item, 3)">我已到达</button>
					<button class="confirm" v-if="item.status == 1 || !item.status" @click.stop="affirmOrder(item, 2)">确认接单</button>
				</view>
			</view>
			<view class="list_loading" v-if="isAllData != 0">
				<view class="loading" v-if="isAllData == '1'">
				  正在加载，请稍候
				  <uni-icons type="spinner-cycle" size="16" style="margin-left: 4px;"></uni-icons>
				</view>
				<view class="all-data" v-else>已加载全部数据~</view>
			</view>
		</scroll-view>
		
		<u-datetime-picker
			:show="isShowTime"
			v-model="timeValue"
			mode="datetime"
			:minDate="Number(new Date())"
			@cancel="isShowTime = false"
			@confirm="selectTimeConfirm"
		></u-datetime-picker>
	</view>
</template>

<script>
	import {timestampToDate} from '@/utils/index.js'
	import pageConfig from '@/config'
	import Home from "@/api/home.js"
	const baseUrl = pageConfig.baseUrl
	export default {
		data() {
			return {
				baseUrl,
				itemLists: [],
				scrollHeight: '',
				tabList: [{
						label: '待接单',
						name: 1
					},
					{
						label: '待开始',
						name: 2
					},
					{
						label: '进行中',
						name: 3
					},
					{
						label: '待支付',
						name: 4
					},
					{
						label: '已完成',
						name: 5
					},
				],
				activeName: 1,
				total: 0,
				pageInfo: {
					pageNum: 1,
					pageSize: 10
				},
				isAllData: '0',
				timeValue: Number(new Date()),
				isShowTime: false,
				defalutRow: {},
				masterCount: {},
			}
		},
		onLoad() {
			this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 45 + 'px'
		},
		onShow() {
			this.total = 0;
			this.pageInfo = {
				pageNum: 1,
				pageSize: 10
			}
			this.itemLists = [];
			this.listChange()
			this.getMasterCount()
		},
		methods: {
			getStatusLabel(status) {
				let index = this.tabList.findIndex(ele => ele.name == status);
				return index > -1 ? this.tabList[index].label : '';
			},
			//切换tab
			clickTabItem(value) {
				this.total = 0;
				this.pageInfo = {
					pageNum: 1,
					pageSize: 10
				}
				this.activeName = value;
				this.itemLists = [];
				this.listChange();
			},
			async listChange() {
				this.isAllData = '1';
				let res = await Home.getMasterOrderxcxList({ orderStatus: this.activeName, ...this.pageInfo });
				let list = res.rows;
				this.itemLists.push(...list.map(ele => {
					return {
						...ele.wbRepairApply,
						id: ele.id,
						payMoney:ele.payMoney,
						repairId: ele.wbRepairApply && ele.wbRepairApply.id || null
					}
				}));
				this.total = res.total;
				let {pageNum, pageSize} = this.pageInfo;
				if(pageNum  >= this.total / pageSize) {
					this.isAllData = '2';
				} else {
					this.isAllData == '0';
				}
				console.log(res)
			},
			// 维修师傅统计
			getMasterCount() {
				Home.getMasterCount().then(res => {
					this.masterCount = res.data
				})
			},
			loadMore() {
				let {pageNum, pageSize} = this.pageInfo;
				if(pageNum  >= this.total / pageSize) {
					this.isAllData = '2';
					return;
				}
				this.$set(this.pageInfo, 'pageNum', pageNum++);
				this.listChange();
			},
			//确认接单
			affirmOrder(item, status) {
				if(status == 4) {
					uni.navigateTo({
						url: '/subPages/home/master/settleAccount?id=' + item.repairId + '&ownerComName=' + (item.ownerCompanyName || '')
					})
					return;
				}
				Home.updateMasterOrderStatus({id: item.repairId, status}).then(res => {
					this.activeName = status;
					this.total = 0;
					this.pageInfo = {
						pageNum: 1,
						pageSize: 10
					};
					this.itemLists = [];
					this.listChange();
				})
				
			},
			updateTime(item) {
				this.isShowTime = true;
				this.defalutRow = {...item};
			},
			selectTimeConfirm(e) {
				console.log(e)
				let time = timestampToDate(e.value, 'ymdhm');
				Home.updateMasterOrderStatus({id: this.defalutRow.repairId, newArriveTime: time}).then(res => {
					this.activeName = this.defalutRow.status;
					this.total = 0;
					this.pageInfo = {
						pageNum: 1,
						pageSize: 10
					};
					this.itemLists = [];
					this.isShowTime = false;
					this.listChange()
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.main-content {
		width: 100%;
		height: 100%;

		.list-box {
			padding: 20rpx 30rpx;

			.list-item {
				background: #ffffff;
				padding: 20rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				>view {
					margin-bottom: 10rpx;
					display: flex;
					justify-content: space-between;

					&:last-child {
						margin: 0;
						margin-top: 20rpx;
					}

					>text {
						font-size: 24rpx;
						font-style: normal;
						font-weight: 400;
						line-height: 40rpx;

						&:nth-of-type(1) {
							opacity: 0.4;
						}

						&:nth-of-type(2) {
							color: #325ef5;
						}
					}

					.status {
						font-size: 28rpx;
						font-weight: 500;
					}
				}

				.title {
					// display: block;
					font-size: 28rpx;
					font-style: normal;
					font-weight: 500;
					line-height: 40rpx;
					opacity: 0.9;
					margin-bottom: 10rpx;
					color: #325ef5;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.describe {
					display: flex;
					font-size: 24rpx;
					font-style: normal;
					font-weight: 400;
					line-height: 40rpx;
					opacity: 0.4;
					margin-bottom: 10rpx;
				}

				.imgs {
					view {
						image {
							width: 94rpx;
							height: 94rpx;
							background: #acacac;
							margin-right: 16rpx;
							&:last-child {
								margin: 0;
							}
						}
					}
				}

				.remark {
					padding: 15rpx 20rpx;
					background: #f6f8fa;
					border-radius: 16rpx;

					text {
						color: #325ef5;
						font-family: "PingFang SC";
						font-size: 24rpx;
						font-style: normal;
						font-weight: 400;
						line-height: normal;
						opacity: 1 !important;
					}
				}

				.submit {
					justify-content: flex-end;
					flex-wrap: wrap;

					button {
						border: 0;
						margin: 0;
						padding: 12rpx 20rpx;
						line-height: normal;
						font-size: 28rpx;
						font-family: "PingFang SC";
						font-style: normal;
						font-weight: 400;
						line-height: 40rpx;
						margin-left: 40rpx;
					}

					.cancel {
						border: 2rpx solid #325ef5;
						background: #ffffff;
						color: #325ef5;
					}

					.confirm {
						background: #325ef5;
						color: #ffffff;
					}
				}
			}
		}
	}
	
	.page-top {
		width: 100%;
		height: 10%;
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		
		.page-top-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			text:nth-child(2) {
				font-size: 10px;
				margin-top: 20rpx;
			}
		}
	}
</style>